<template>
  <!-- 搜索栏 -->
  <a-form layout="inline">
    <a-form-item label="课程名称">
      <a-input placeholder="请输入课程名称" v-model:value="listParam.courseName"></a-input>
    </a-form-item>
    <a-form-item label="学期">
      <a-select placeholder="请选择学期" :options="options" style="width:130px;" v-model:value="listParam.courseType"></a-select>
    </a-form-item>
    <a-button style="margin-right: 20px;" @click="searchBtn">
      <template #icon>
        <search-outlined />
      </template>
      搜索
    </a-button>
    <a-button type="primary" danger style="margin-right: 20px;" @click="resetBtn">
      <template #icon>
        <close-outlined />
      </template>
      重置
    </a-button>
    <a-button @click="addBtn" type="primary" style="margin-right: 20px;">
      <template #icon>
        <plus-outlined />
      </template>
      新增
    </a-button>
  </a-form>
  <!-- 新增或编辑弹框 -->
  <add-course ref="addRef" @save="save"></add-course>

  <!-- 表格列表 -->
  <a-table
      :dataSource="tableList.list"
      :columns="columns"
      :pagination="rolePage"
      :scroll="{ y: tableHeight }"
      bordered
  >
    <!-- 操作按钮 -->
    <template #bodyCell="{ column, record }">
      <template v-if="column.key === 'courseType'">
        <a-tag v-if="record.courseType === '0'" color="blue">春季</a-tag>
        <a-tag v-if="record.courseType === '1'" color="orange">秋季</a-tag>
      </template>

      <template v-if="column.key === 'courseColor'">
        <div v-if="record.courseColor" :style="{height: '20px', width: '100%', borderRadius: '5px', backgroundColor: record.courseColor.substring(record.courseColor.indexOf('-') + 1, record.courseColor.length)}"></div>
      </template>

      <template v-if="column.key === 'action'">
        <a-button type="primary" @click.stop="editBtn(record)">
          <template #icon>
            <edit-outlined />
          </template>
          <span>编辑</span>
        </a-button>
        <a-button type="primary" danger style="margin-left: 10px" @click.stop="deleteBtn(record)">
          <template #icon>
            <close-outlined />
          </template>
          <span>删除</span>
        </a-button>
      </template>
    </template>
  </a-table>
</template>

<script setup lang="ts">
import {ref, reactive, onMounted, computed} from 'vue'
import AddCourse from "./component/addCourse.vue"
import useTable from "../../composable/course/useTable"
import useCourse from "@/composable/course/useCourse";

//表格数据
const { columns, tableList, rolePage, getList, tableHeight, listParam } = useTable()

//表格操作
const { addBtn, editBtn, deleteBtn, save, searchBtn, resetBtn, addRef } = useCourse(getList, listParam);

//下拉选择的数据
const options = ref([
  { value: '0', label: '春季' },
  { value: '1', label: '秋季' }
]);


</script>

<style scoped lang="scss">

</style>
